<template>
        <div>
           <mt-search v-model="value" @input.native="searchList($event)"></mt-search> 
             <mt-navbar class="page-part" v-model="selected">
          <mt-tab-item id=" " @click.native="tabClassify">全部产品</mt-tab-item>     
        <mt-tab-item v-for="(Clssify,index) in productionClassify" :key="index" :id="Clssify._id" @click.native="tabClassify">{{Clssify.title}}</mt-tab-item>
      </mt-navbar> 
                   <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="false"  :auto-fill="false" ref="loadmore">
  <ul class="productionlist">
  <li v-for="(item,index) in production" :key='index'>
  <img slot="icon" v-lazy="`http://localhost:3000/${item.img.filename}`" width="150" height="150">
  <div class="price"><i>￥</i><em style="fontSize:20px">{{item.price}}</em></div>
  <p class="overText">{{item.name}}</p>
  <mt-button  type="danger" size="small" :data-id="item._id" @click.native="addToCart($event)">加入购物车</mt-button>
  </li>
</ul>
</mt-loadmore>
        </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data(){
       return{
         value: "", 
          selected:'',
          page:1,
      }
  },
  computed: {
          ...mapGetters(["production","nomore","productionClassify"])
  },
  methods: {
          ...mapActions(["getProduction","getProductionClassify","getCarts"]),
    //搜索功能
    searchList(e) {
      var val = e.target.value;
      this.getProduction({ name: val });
    },
    //tab栏切换
    tabClassify(){
            this.getProduction({typeId:this.selected});
    },
    //添加购物车
    addToCart(e){
      var cartId=e.target.getAttribute("data-id");
      this.getCarts({id:cartId})

    },
    //下拉刷新
     loadTop:function() { //组件提供的下拉触发方法  
                
        this.page=1;
         this.getProduction();
        this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位  
      },
      //上拉加载  
      loadBottom:function() {  // 上拉加载  
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
        this.page++;
        this.getProduction({page:this.page}) 
       
      },
      //是否有更多  
        more:function (){   
        this.page++;
        this.getProduction({page:this.page})
      }, 
       // 是否还有下一页，如果没有就禁止上拉刷新 
       isNoMore:function(isNoMore){       
        this.allLoaded = false;  
        if(isNoMore){           
          this.allLoaded = true;  //true是禁止上拉加载 
        }  
      }    
  },
  created () {
    this.getProduction()
    this.getProductionClassify()      
  }
}
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.mint-search {
  height: auto;
}
.mint-search .mint-searchbar {
  z-index: 0;
}
.productionlist {
  list-style-type: none;
  overflow: hidden;
  width: 100%;
}
li {
  float: left;
  width: 38%;
  border: 1px solid #eeeeee;
  padding: 21px;
}
.price{
color:red;
font-size:16px;
font-family:'Verdana';
}
.overText {
  height: 40px;
  width: 100%;
  overflow: hidden;
  white-space: wrap;
  text-overflow: ellipsis;
  margin: 15px 0 10px 0;
}
</style>
